@import "compass/css3";
@import "compass/reset";

*{margin:0;padding:0;border:0;text-decoration:none;
	list-style:none;border-box:box-sizing;}

.clearfix {
	*zoom:1;
}
.clearfix:after,.clearfix:before {
	content:"";
	line-height:0;
	display:table;
}
.clearfix:after {
	clear:both;
}

h3 {
	font-size:18px;
	font-weight:bold;
	margin:20px 0 20px 20px;
}
.common {
	width:100%;
	background:#435a6b;
	text-align:center;
}
.nav-bracket {
	padding:5em 3em;
	ul {
		// height:140px;
		// line-height:140px;

		li {
			position:relative;
			// display:inline-block;
			float:left;
			width:10%;
			span {
				position:absolute;
				font-size:20px;
				color:#fff;
				transition:0.5s;
				opacity:0;
			}
			.left-bar {
				left:50%;
			}
			.right-bar {
				right:50%;
			}

			a{
				width:100%;
				display:inline-block;
				color:#fff;
				width:80%;
				height:100%;
				&:hover .left-bar{
					left:20px;
					opacity:1;
				}
				&:hover .right-bar{
					right:20px;
					opacity:1;
				}
			}
		}
	}
}
.nav-bottom {
	padding:5em 3em;
	ul {
		// height:140px;
		// line-height:140px;
		li {
			// position:relative;
			display:inline-block;
			width:10%;
			a {
				width:100%;
				color:#fff;
				padding:10px 0;
				position:relative;
				&:hover span {
					top:100%;
					opacity:1;
				}
			}
			span {
				position:absolute;
				left:0;
				top:120%;
				width:100%;
				border:1px solid #B8860B;
				opacity:0;
				transition:0.5s;
			}
		}
	}
}

.nav-double {
	padding:5em 3em;

	ul {
		// height:140px;
		// line-height:140px;
		li {
			display:inline-block;
			width:5%;
			a {
				width:100%;
				position:relative;
				color:#fff;
				padding:10px 0;
				&:hover .top-line{
					top:0;
					opacity:1;
					@include transform(scaleX(1.2));
				}
				&:hover .bottom-line {
					width:100%;
					opacity:1;
					@include transform(scaleX(1.2));
				}
				span {
					position:absolute;
					left:0;
					width:100%;
					border:1px solid #B8860B;
					@include transition(0.2s);
				}
			}
		}
	}
}
.top-line {
	top:100%;
	opacity:0;
}
.bottom-line {
	bottom:0;
	opacity:0.8;

}
.nav-slight {
	padding:5em 3em;
	ul {
		// height:140px;
		// line-height:140px;
		li {
			display:inline-block;
			width:8%;
			a {
				width:100%;
				color:#fff;
				padding:10px;
				position:relative;
				@include transition(0.2s);
				&:hover {
					color:#B8860B;
				}

				&:hover .top-slight {
					top:0;
					opacity:1;

				}
				&:hover .bottom-slight {
					bottom:0;
					opacity:1;

				}
				span {
					position:absolute;
					left:0;
					width:100%;
					border:1px solid #B8860B;
					@include transition(0.2s);
					opacity:0;
				}
			}
		}
	}
}
.top-slight {
	top:130%;
}
.bottom-slight {
	bottom:130%;
}

.navs-down {
	padding:5em 3em;

	ul {
		// width:100%;
		// height:140px;
		// line-height:140px;
		li {
			display:inline-block;
			width:7%;
			a {
				display:inline-block;
				width:100%;
				color:#fff;
				@include transition(0.2s);
				&:hover {
					color:#666;
					@include scale(0.9);
				}
			}
		}
	}
}
.navs-fall {
	padding:5em 3em;

	ul {
		// width:100%;
		// height:140px;
		// line-height:140px;
		li {
			display:inline-block;
			position:relative;
			width:7%;
			&:hover .hiden {
				left:0;
				top:0;
				opacity:1;
			}
			a {
				width:100%;
				color:#666;
				@include transition(0.5s);
			}
			.hiden {
				opacity:0;
				position:absolute;
				left:20px;
				top:-10px;
				color:#fff;
			}
		}
	}
}

.navs-border {
	padding:5em 3em;

	ul {
		// width:100%;
		// height:140px;
		// line-height:140px;
		li {
			float:left;
			a {
				position:relative;
				color:#fff;
				padding:10px 20px;
				margin-left:20px;
				text-align:center;
				border:2px solid #666;
				&:hover span {
					top:-2px;
					left:-2px;
					opacity:1;
				}
				span {
					position:absolute;
					left:15px;
					top:-15px;
					width:100%;
					height:100%;
					border:2px solid #fff;
					opacity:0;
					@include transition(0.2s);	
				}
			}
		}
	}
}

.navs-text {
	padding:5em 3em;

	ul {
		// width:100%;
		// height:140px;
		// display:table-cell;
		// vertical-align:middle;
		li {
			float:left;
			a {
				color:#333;
				padding:10px 20px;
				position:relative;
				&:before {
					content:attr(data-hover);
					color:#fff;
					position:absolute;
					left:20px;
					max-width:0;
					@include transition(1s);
					white-space:nowrap;
					overflow:hidden;
				}
				&:hover:before {
					max-width:100%;
				}
			}
		}
	}
}

.navs-push {
	padding:5em 3em;
	
	// width:1369px;
	// height:140px;
	// display:table-cell;
	// vertical-align:middle;
	a {
		color:#fff;
		padding:15px 20px;
		background:#54a231;
		margin-left:40px;
		position:relative;
		&:before {
			content:attr(data-hover);
			padding:15px 0;
			background:#fff;
			color:#54a231;
			width:100%;
			position:absolute;
			left:0;
			top:0;
			max-width:0;
			white-space:nowrap;
			overflow:hidden;
			@include transition(0.6s);
		}
		&:hover:before {
			max-width:100%;
		}
	}
}

.navs-push-two {
	padding:5em 3em;
	a {
		display:inline-block;
		overflow:hidden;
		position:relative;
		color:#fff;
		padding:10px 15px;
		margin:10px 20px;
		background:#0f7c67;
		&:before {
			position:absolute;
			left:-100%;
			top:0;
			width:100%;
			padding:10px 0;
			color:#0f7c67;
			background:#fff;
			content:attr(data-hover);
			@include transition(0.5s);
		}
		&:hover:before {
			@include transform(translateX(100%));
		}
		&:hover span {
			@include transform(translateX(100%));
		}
		span {
			display:block;
			@include transition(0.5s);
		}
	}
}

.navs-slide {
	padding:5em 3em;
	a {
		position:relative;
		display:inline-block;
		color:#fff;
		margin:10px 20px;
		overflow:hidden;
		@include transition(0.5s);
		span {
			background:#0f7c67;
			padding:10px 15px;
			display:inline-block;
			@include transition(0.2s);
		}
		&:hover span {
			@include transform(translateY(-100%));
		}
		&:before {
			position:absolute;
			left:0;
			top:100%;
			color:#0f7c67;
			background:#fff;
			content:attr(data-hover);
			width:100%;
			padding:10px 0;
			@include transition(0.2s); 
		}
		&:hover:before {
			@include transform(translateY(-100%));
		}
	}
}

.navs-slide-two {
	padding:5em 3em;
	a {
		position:relative;
		display:inline-block;
		overflow:hidden;
		color:#fff;
		margin:10px 20px;
		span {
			position:relative;
			padding-bottom:5px;
			display:inline-block;
			@include transition(0.2s);
			&:hover {
				@include transform(translateY(-100%));
			}
			&:before {
				position:absolute;
				content:attr(data-hover);
				width:100%;
				top:100%;
			}
		}
	}
}

.navs-slide3d {
	padding:5em 3em;
	a {
		position:relative;
		color:#06c;
		span {
			display:inline-block;
			padding:10px 15px;
			background:#fff;
			@include transition(0.5s);
			@include transform(rotateX(90deg));
		}
		&:hover span {
			@include transform(translateY(0) rotateX(0));
		}
		&:before {
			position:absolute;
			left:0;
			content:attr(data-hover);
			width:100%;
			color:#fff;
			background:#06c;
			padding:10px 0;
			@include transition(0.5s);
		}
		&:hover:before {
			@include transform(translateY(-50%) rotateX(90deg));
		}
	}
}
//实现正方形变换的3d效果
.navs-slide3d-two {
	padding:5em 3em;
	a {
		position:relative;
		color:#fff;
		margin:10px 20px;
		span {
			// display:inline-block;
			float:left;
			margin:10px 20px;
			padding:15px 15px;
			background:#06c;
			@include transition(0.3s);
			transform-origin:50% 0;
			@include transform-style(preserve-3d);
			&:before {
				position:absolute;
				left:0;
				top:100%;
				content:attr(data-hover);
				width:100%;
				color:#fff;
				background:#06c;
				padding:15px 0;
				@include transform(rotateX(-90deg));
				transform-origin:50% 0;
				@include transition(background 0.3s);
			}
		}
		&:hover span {
 			@include transform(rotateX(90deg) translateY(-22px));
		}
	}
}

// .navs-slide3d-two {
// 	padding:5em 3em;
// 	a {
// 		position:relative;
// 		color:#fff;
// 		margin:10px 20px;
// 		span{
// 			display:inline-block;
// 			padding:10px 15px;
// 			background:#06c;
// 			@include transition(0.5s);
// 			transform-origin:50% 0;
// 			@include transform-style(preserve-3d);
// 			&:before {
// 				position:absolute;
// 				left:0;
// 				top:100%;
// 				color:#06c;
// 				background:#fff;
// 				content:attr(data-hover);
// 				width:100%;
// 				padding:10px 0;
// 				@include transform(rotateX(-90deg));
// 				transform-origin:50% 0;
// 			}
// 		}
// 		&:hover span {
// 			@include transform(rotateX(90deg) translateY(-22px));
// 		}
// 	}
// }

.navs-turn {
	padding:5em 3em;
	a {
		position:relative;
		color:#fff;
		padding:10px 15px;
		background:#587285;
		margin:10px 20px;
		&:before {
			position:absolute;
			left:0;
			top:0;
			color:#587285;
			content:attr(data-hover);
			background:#fff;
			width:100%;
			padding:10px 0;
			@include transition(0.5s);
			@include transform(rotateX(270deg));
			transform-origin:0 0;
		}
		&:hover:before {
			@include transform(rotateX(10deg));//必须得是10deg
		}
	}
}

